<!DOCTYPE html>
<html>

<head>
    <script src="./sm2.js"></script>
    <script>
        var pubKey;
        var priKey;
        var cipherMode = 1; // 1 - C1C3C2，0 - C1C2C3，默认为1
        function generateKey() {
            var keypair = sm2.generateKeyPairHex();
            pubKey = keypair.publicKey;
            priKey = keypair.privateKey;
            document.getElementById("pubKey").innerText = pubKey;
            document.getElementById("priKey").innerText = priKey;
        }

        function encrypt() {
            if (pubKey === undefined) {
                alert("需要先提供密钥");
                return;
            }
            var plainText = document.getElementById("inPlainText").value;
            var encryptData = sm2.doEncrypt(plainText, pubKey, cipherMode);
            document.getElementById("encryptedText").value = encryptData;
        }

        function decrypt() {
            if (priKey === undefined) {
                alert("需要先提供密钥");
                return;
            }
            var encryptData = document.getElementById("encryptedText").value;
            var decryptData = sm2.doDecrypt(encryptData, priKey, cipherMode) // 解密结果
            document.getElementById("outPlainText").innerText = decryptData;
        }
    </script>
</head>

<body>
    sm2 demo<br>
    <form>
        <fieldset>
            <legend>第一步: 生成密钥</legend>
            <tr>
                <td>
                    <p>公钥(Hex):</p>
                </td>
                <td>
                    <textarea id="pubKey" style="width:650px;"></textarea><br>
                </td>
            </tr>
            <tr>
                <td>
                    <p>私钥(Hex): </p>
                </td>
                <td>
                    <textarea id="priKey" style="width: 650px;"></textarea><br>
                </td>
            </tr>
            <tr>
                <td>
                    <button type="button" onclick="generateKey()">生成密钥</button><br>
                </td>
            </tr>
        </fieldset>
        <fieldset>
            <legend>2. 加密</legend>
            <tr>
                <td>明文:</td>
                <td>
                    <input id="inPlainText" value="123456" style="width: 650px;"><br>
                </td>
            </tr>
            <tr>
                <td>
                    <button type="button" onclick="encrypt()">加密</button><br>
                </td>
            </tr>
        </fieldset>
        <fieldset>
            <legend>3. 解密</legend>
            <tr>
                <td style="text-align: center;vertical-align: middle;">
                    <p>密文:</p>
                </td>
                <td>
                    <textarea id="encryptedText" style="width: 650px;height: 100px;"></textarea><br>
                </td>
                <td>
                    <button type="button" onclick="decrypt()">3. 解密</button><br>
                </td>
            </tr>
        </fieldset>
    </form>
    <p>------------------------解密结果:----------------------------------------------------------------</p>
    <p id="outPlainText"></p><br>
</body>

</html>